import React from 'react';
import {NavLink,Routes,Route} from "react-router-dom";
import Home from "./pages/Home";
import One from "./pages/One";
import Two from "./pages/Two";
import Three from "./pages/Three";
import "./App.css";


function App(props) {
    return (
        <div className={"container"}>
            <nav>
                <NavLink to={"/"}>首页</NavLink>

                {/*search传递参数
                    to的值可以是字符串也可以是对象
                */}
                <NavLink to={"/one?a=1&b=2"}>ONE1</NavLink>
                <NavLink to={{
                    pathname:"/one?a=10&b=20"
                }}>ONE2</NavLink>
                <NavLink to={{
                    pathname:"/one",
                    search:"a=100&b=200"
                }}>ONE3</NavLink>





                <NavLink to={"/two"}>TWO</NavLink>
                <NavLink to={"/three"}>THREE</NavLink>
            </nav>
            <Routes>
                <Route path={"/"} element={<Home/>}></Route>
                <Route path={"/one"} element={<One/>}></Route>
                <Route path={"/two"} element={<Two/>}></Route>
                <Route path={"/three"} element={<Three/>}></Route>
            </Routes>

        </div>
    );
}

export default App;